<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap{width:100%; height:100%; overflow:hidden; margin:0; font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UzpZ9A94pysSfj013URfjCfeUKjMv52F"></script>
    <title>走航轨迹测试</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var startLong = 121.510650; // 开始时的经度
    var startLat = 31.254412; // 开始时的纬度
    var endLong = 121.748359;
    var endLat = 39.034749;

    var latData = new Array(31.254412,31.252064, 31.25404, 31.284165, 31.298483, 31.340438, 31.348826,31.362641, 31.373988,31.391744, 31.413443, 31.277252, 31.275277,31.496244,31.707147,32.052523,32.230585,32.854422,33.773037,34.72028,34.819437, 36.143659, 37.195918, 38.17552, 38.883657, 38.937295,  39.034749);
    var longData = new Array(121.510650, 121.510175, 121.538921, 121.574566,121.571116,121.560768, 121.54237,121.5142, 121.50845, 121.515924,121.551569,121.793034, 121.88272, 122.009202,122.042465,122.140201,122.14825,122.176996,122.08156,122.311526,122.250585,122.508147,122.912887,122.747312, 122.452955,121.851675,121.748359);
    var iter = 0;

    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(121.510650, 31.254412), 12);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("上海");          // 设置地图显示的城市
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    setInterval(goWay,800); // 0.8秒画一次线

    var carMk;
    // var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//马里奥
    var myIcon = new BMap.Icon("../img/1.jpg", new BMap.Size(200,200), {imageOffset: new BMap.Size(0, 0)});//马里奥

    function goWay(){
        iter = iter + 1;
        if (iter < latData.length){
            startLat = endLat;
            startLong = endLong;
            endLong = longData[iter]; // 读取经纬度
            endLat  = latData[iter];
            drawIcon(startLong,startLat,endLong,endLat);
        }else{
            pass;
        }
    }

    function drawGreenLine(startLong,startLat,endLong,endLat){
        var polyline = new BMap.Polyline([
            new BMap.Point(startLong,startLat),//起始点的经纬度
            new BMap.Point(endLong,endLat)//终止点的经纬度
        ], {strokeColor:"forestgreen",//设置颜色
            strokeWeight:5, //宽度
            strokeOpacity:1});//透明度
        map.addOverlay(polyline); //将标注添加到地图中
    }

    function drawIcon(startLong,startLat,endLong,endLat){
        if(carMk){
            map.removeOverlay(carMk);
        }
        carMk = new BMap.Marker(
            new BMap.Point(endLong,endLat),
            {icon:myIcon});
        map.addOverlay(carMk);

        drawGreenLine(startLong,startLat,endLong,endLat);
        drawGreenLine(map);
    }

</script>
